<template>
	<view class="order_details">
		<!--  -->
		
		<!--  -->
		<view class="main">
			<view class="title">商品信息</view>
			<view class="goods_info">
				<view class="image">
					<image :src="goods.photos[0]" mode="aspectFill"></image>
					<text class="txt2">{{goods.opText}}</text>
				</view>
				<view class="info">
					<view class="name one-txt-cut">{{goods.name}}</view>
					<!-- <view class="sku">
						<text>规格：{{goods.unit}}</text>
					</view>
					<view class="money1">
						<view class="left">
							<text>￥{{goods.price}}</text>
						</view>
						<view class="right">x{{num}}</view>
					</view> -->
				</view>
			</view>
			<view v-if="goods.theme_config" class="content-images"  :style="{'background-color':goods.theme_config.bg}">
				<image class="img" mode="widthFix" v-for="img of goods.theme_config.photoLists" :key="img" :src="img" ></image>
			</view>
			<!-- <view class="main_text">
				<view class="info">
					<view class="left">商品总额</view>
					<view class="right">￥{{pay_money}}</view>
				</view>
				<view class="info">
					<view class="left">实际支付</view>
					<view class="right">￥{{pay_money}}</view>
				</view>
			</view> -->
		</view>
		<!--  -->
		<!-- <view class="main_info">
			<view class="info" v-if='image' style="height: 150rpx;align-items: flex-start;">
				<view class="left">付款凭证</view>
				<view class="image" @click="imageBtn">
					<image :src="image" mode="aspectFill"></image>
				</view>
			</view>
			<view class="info">
				<view class="left">订单编号</view>
				<view class="right">{{order_num}}</view>
			</view>
			<view class="info">
				<view class="left">合计</view>
				<view class="right">￥{{pay_money}}</view>
			</view>
			<view class="info" v-if="refuse_msg">
				<view class="left">拒绝原因</view>
				<view class="right">{{refuse_msg}}</view>
			</view>
			<view class="info" v-if="bankInfo.bank">
				<view class="left">开户银行</view>
				<view class="right">{{bankInfo.bank}}</view>
			</view>
			<view class="info" v-if="bankInfo.name">
				<view class="left">账户名称</view>
				<view class="right">{{bankInfo.name}}</view>
			</view>
			<view class="info" v-if="bankInfo.number">
				<view class="left">银行账户</view>
				<view class="right">{{bankInfo.number}}</view>
			</view>
			
			<view class="info" v-if="logistics_name">
				<view class="left">配送公司</view>
				<view class="right">{{logistics_name}}</view>
			</view>
			<view class="info" v-if="logistics_code">
				<view class="left">配送单号</view>
				<view class="right">{{logistics_code}}<text @click="logisticsBtn">查看快递</text></view>
			</view>
			<view class="info" v-if="logistics_id" style="height: 110rpx;padding: 20rpx 0 40rpx; border-bottom: 1rpx solid #eee;">
				<view class="left">(有些订单需要物流发货，系统只支持快递信息查询，请到 <text @click="logisticsBtn">http://www.1008656.com/</text>询物流信息)</view>
			</view>
			<view class="info_time">
				<view class="line">
					<text></text>
				</view>
				<view class="time" v-if="createtime">
					<view class="left">
						<image src="@/static/images/time_icon.png" mode=""></image>
						<text>创建时间</text>
					</view>
					<view class="right">{{createtime}}</view>
				</view>
				<view class="time" v-if="pya_time">
					<view class="left">
						<image src="@/static/images/time_icon.png" mode=""></image>
						<text>购买时间</text>
					</view>
					<view class="right">{{pya_time}}</view>
				</view>
				<view class="time" v-if="audit_time && shop_status==4">
					<view class="left">
						<image src="@/static/images/time_icon.png" mode=""></image>
						<text>拒绝时间</text>
					</view>
					<view class="right">{{audit_time}}</view>
				</view>
				<view class="time" v-if="audit_time && shop_status==3">
					<view class="left">
						<image src="@/static/images/time_icon.png" mode=""></image>
						<text>店主审核通过时间</text>
					</view>
					<view class="right">{{audit_time}}</view>
				</view>
				<view class="time" v-if="deliver_time">
					<view class="left">
						<image src="@/static/images/time_icon.png" mode=""></image>
						<text>发货时间</text>
					</view>
					<view class="right">{{deliver_time}}</view>
				</view>
				<view class="time" v-if="confirm_time">
					<view class="left">
						<image src="@/static/images/time_icon.png" mode=""></image>
						<text>收货时间</text>
					</view>
					<view class="right">{{confirm_time}}</view>
				</view>
			</view> -->
		<!-- </view> -->
		<!-- 底部 -->
		<view :style="[paddingStyle]"></view>
		<view class="details_btn" :style="[botStyle]">
			<!-- <text class="btn1" v-if="goods.type==1 && userinfo.is_mobile==1" @click="phoneBtn">联系店长</text> -->
			<view class="sub-btn" @click="kfBtn">立即办理</view>
			<!-- <text class="btn1" v-if="status==3 || status==4" @click="logisticsBtn">查看物流</text>
			<text class="btn1" v-if="status==1" @click="shoukuanBtn">收款账户</text>
			<text class="btn2" v-if="status==1" @click="uploadBtn">上传凭证</text>
			<text class="btn2" v-if="status==3" @click="receiptBtn">确认收货</text> -->
		</view>
		<!-- 支付信息 -->
		<PayInfo ref="pay_info" :info='bankInfo'></PayInfo>
		<!-- 上传支付凭证 -->
		<UploadPayment ref="upPayment" @submit='submitBtn'></UploadPayment>
		<!-- 确认收货 -->
		<ConfirmReceipt ref="confirm_receipt" @submit='submitBtn'></ConfirmReceipt>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import PayInfo from '@/components/pay_info/pay_info.vue';
	import UploadPayment from '@/components/upload_payment/upload_payment.vue';
	import ConfirmReceipt from '@/components/confirm_receipt/confirm_receipt.vue';
	export default {
		components:{
			PayInfo,UploadPayment,ConfirmReceipt
		},
		data() {
			return {
				bottomHeight:0,
				id:'',
				shop_status:'',
				status:'',
				consignee_realname:'',
				consignee_mobile:'',
				address:'',
				goods:'',
				pay_money:'',
				num:'',
				image:"",
				order_num:'',
				refuse_msg:"",
				bankInfo:{
					name:'',
					bank:'',
					number:''
				},
				logistics_name:'',
				logistics_code:'',
				logistics_id:'',
				createtime:'',
				pya_time:'',
				confirm_time:'',
				deliver_time:'',
				audit_time:'',
				shop_text:'',
			};
		},
		computed:{
			...mapState({
				userinfo: state => state.userinfo
			}),
			paddingStyle(){
				var height = this.bottomHeight?(this.bottomHeight*2+108+'rpx'):'108rpx'
				return {
					paddingBottom:height
				}
			},
			botStyle(){
				return {
					paddingBottom:this.bottomHeight?this.bottomHeight+'px':'20rpx'
				}
			},
		},
		onLoad(opt) {
			this.id=opt.id
			this.agid = opt.agid
			// uni.getSystemInfo({
			// 	success: (res) => {
			// 		this.bottomHeight = res.safeAreaInsets.bottom
			// 	}
			// });
			this.orderDetails()
		},
		methods:{
			orderDetails(){
				var that = this
				that.$tips.showLoading('加载中')
				
				var params = {
					packages_id:that.id,
				}
			
				that.$httpApi.goodsInfo(params).then((res)=>{
					that.$tips.hideLoading()
					if(res.code==1){
						this.goods = res.data
						console.log(res);
					}
				})
			},
			// 收款账号
			shoukuanBtn(){
				this.$refs.pay_info.openBtn()
			},
			// 上传凭证
			uploadBtn(){
				this.$refs.upPayment.openBtn(this.id,1)
			},
			// 
			submitBtn(){
				this.orderDetails()
			},
			// 查看物流
			logisticsBtn(){
				uni.navigateTo({
					url:'/pages/other/logistics?order='+this.order_num
				})
			},
			// 联系店长
			phoneBtn(){
				uni.makePhoneCall({
					phoneNumber: this.shop_text
				});
			},
			// 立即办理
			kfBtn(){
				let { id,name,is_selection } = this.goods
				if(this.goods.platform_type == 1 || this.goods.platform_type == 8){
					uni.navigateTo({
						url:`/pages/order/order_add?id=${this.id}&agid=${this.agid}&name=${name}`
					})
				}else{
					uni.navigateTo({
						// url:`/pages/order/order_add_two?id=${this.id}&agid=${this.agid}&name=${name}`
						url:`/pages/order/order_add_two?id=${this.id}&agid=${this.agid}&name=${name}&is_selection=${is_selection}`
					})
				}
				
			},
			// 确认收货
			receiptBtn(){
				this.$refs.confirm_receipt.openBtn(this.id)
			},
			// 预览图片
			imageBtn(){
				var arr = []
				arr.push(this.image)
				uni.previewImage({
					current:0,
					urls: arr,
				})
			},
		}
	}
</script>

<style lang="less">
	.order_details{
		width: 100%;
		.details_top{
			width: 100%;
			height: 128rpx;
			padding: 0 32rpx;
			background: #26C281;
			display: flex;
			align-items: center;
			image{
				display: block;
				width: 48rpx;
				height: 48rpx;
			}
			.txt{
				padding-left: 16rpx;
				font-size: 36rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}
			.tip{
				padding-left: 16rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
		.address{
			width: 100%;
			padding: 32rpx;
			background: #fff;
			.name{
				width: 100%;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
			}
			.text{
				padding-top: 15rpx;
				display: flex;
				align-items: center;
				image{
					display: block;
					width: 24rpx;
					height: 24rpx;
				}
				text{
					width: calc(100% - 24rpx);
					padding-left: 10rpx;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}
			}
		}
		.main{
			margin-top: 24rpx;
			width: 100%;
			padding: 25rpx 32rpx;
			background: #fff;
			.title{
				width: 100%;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
			}
			.content-images{
				.img{
					width: 100%;
				}
			}
			.goods_info{
				width: 100%;
				padding: 24rpx 0;
				margin-top: 24rpx;
				border-top: 1rpx solid #F3F3F3;
				border-bottom: 1rpx solid #F3F3F3;
				display: flex;
				
				.image{
					position: relative;
					width: 168rpx;
					height: 168rpx;
					image{
						display: block;
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
					text{
						position: absolute;
						top: 0;
						left: 0;
						z-index: 1;
						display: block;
						padding: 0 15rpx;
						height: 40rpx;
						line-height: 40rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						border-radius: 10rpx 0 10rpx 0;
					}
					.txt1{
						background: #FFA551;
					}
					.txt2{
						background: #26C281;
					}
					.txt3{
						background: #148EFF;
					}
					.txt4{
						background: #BC171B;
					}
				}
				.info{
					width: calc(100% - 168rpx);
					padding-left: 20rpx;
					height: 168rpx;
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					.name{
						width: 100%;
						font-size: 32rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #222222;
					}
					.sku{
						width: 100%;
						padding: 10rpx 0;
						display: flex;
						text{
							display: block;
							padding: 0 10rpx;
							height: 40rpx;
							line-height: 40rpx;
							background: #F7F7F7;
							border-radius: 5rpx;
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
						}
					}
					.num_a{
						width: 100%;
						display: flex;
						align-items: center;
						text{
							padding-right: 20rpx;
							font-size: 28rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
						}
					}
					.money1{
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.left{
							display: flex;
							align-items: center;
							image{
								display: block;
								width: 40rpx;
								height: 40rpx;
							}
							text{
								padding-left: 5rpx;
								font-size: 32rpx;
								font-family: PingFang SC-Medium, PingFang SC;
								font-weight: 500;
								color: #222222;
							}
						}
						.right{
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
						}
					}
					.num{
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.left{
							font-size: 28rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #222222;
						}
						.right{
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
						}
					}
				}
			}
			.tip_txt{
				width: 100%;
				padding: 10rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.txt{
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #222222;
					display: flex;
					align-items: center;
					text{
						display: block;
						width: 40rpx;
						height: 40rpx;
						line-height: 39rpx;
						font-size: 24rpx;
						margin-right: 5rpx;
						text-align: center;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						border-radius: 5rpx;
					}
					.color1{
						background: #FF815A;
					}
					.color2{
						background: #43A5FF;
					}
					.color3{
						background: #51CE9A;
					}
				}
			}
			.main_text{
				width: 100%;
				margin-top: 8px;
				.info{
					width: 100%;
					height: 70rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.left{
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}
					.right{
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #222222;
						display: flex;
						align-items: center;
						image{
							display: block;
							width: 40rpx;
							height: 40rpx;
							margin-right: 10rpx;
						}
					}
				}
			}
		}
		.main_info{
			width: 100%;
			margin: 24rpx 0;
			padding: 20rpx 32rpx;
			background: #fff;
			.info{
				width: 100%;
				height: 70rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					text{
						padding-left: 20rpx;
						color: #148EFF;
					}
				}
				.right{
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
					display: flex;
					align-items: center;
					image{
						display: block;
						width: 40rpx;
						height: 40rpx;
						margin-right: 10rpx;
					}
					text{
						padding-left: 20rpx;
						color: #148EFF;
					}
				}
				.image{
					width: 148rpx;
					height: 148rpx;
					image{
						display: block;
						width: 100%;
						height: 100%;
					}
				}
			}
			.info_time{
				position: relative;
				width: 100%;
				margin-top: 24rpx;
				.line{
					position: absolute;
					top: 0;
					left: 10rpx;
					z-index: 1;
					width: 4rpx;
					height: 100%;
					padding: 30rpx 0;
					text{
						display: block;
						width: 100%;
						height: 100%;
						background: #D4D7DD;
					}
				}
				.time{
					position: relative;
					z-index: 2;
					width: 100%;
					height: 68rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.left{
						display: flex;
						align-items: center;
						image{
							display: block;
							width: 24rpx;
							height: 24rpx;
						}
						text{
							padding-left: 12rpx;
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #222222;
						}
					}
					.right{
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}
				}
			}
		}
		.details_btn{
			position: fixed;
			bottom: 0;
			z-index: 9;
			width: 100%;
			background: #fff;
			padding-top: 20rpx;
			padding-left: 32rpx;
			padding-right: 32rpx;
			
			.sub-btn{				
				display: block;
				padding: 0 25rpx;
				height: 68rpx;
				line-height: 64rpx;
				border-radius: 34rpx;
				font-size: 28rpx;
				font-weight: 600;
				background: #26C281;
				text-align: center;
				color:#fff;
			}
			.btn1{
				color: #999;
				border: 2rpx solid #EBEBEB;
			}
			.btn2{
				color: #26C281;
				border: 2rpx solid #26C281;
			}
		}
	}
</style>
